<template>
  <div class="table-db-root">
    <el-table border show-summary sum-text="Sum" height="100%" tooltip-effect="dark" :data="tableDatas.reverse()">
      <el-table-column>
        <template #header>
          <div class="table-title">
            数据库列表
          </div>
        </template>
        <el-table-column prop="dbname" width="40" label="DB" />
        <el-table-column prop="keys" width="70" label="Keys" />
        <el-table-column prop="expires" width="70" label="Expires" />
        <el-table-column prop="avg_ttl" min-width="50" label="AvgTTL" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const tableDatas = ref([{}])

const initList = (info: any) => {
  tableDatas.value = []
  info.forEach(((item: any) => {
    if (item.key.indexOf('db') === 0) {
      let valueKV = item.value.split(',');
      let dbListItem: any = {};
      dbListItem.dbname = item.key
      valueKV.forEach(((value: any) => {
        let param = value.split("=");
        dbListItem[param[0]] = param[1]
      }))
      tableDatas.value.push(dbListItem)
    }
  }));
}

defineExpose({
  initList
})

</script>

<style scoped lang="scss">
.table-db-root {
  @include box(100%, 100%);
  padding: 10px;

  .table-title {
    @include themeColor(#AE564C, #aa4d45);
    font-size: 15px;
    padding: 5px 0;
  }

  :deep(.el-table--small .el-table__cell) {
    padding: 1px 0;
  }
}
</style>